<template>
  <div class="left-menu-box">
    <el-menu default-active="2" :collapse="collapsed" collapse-transition router :default-active="$route.path" class="el-menu-vertical-demo" background-color="#001529" text-color="#a5acb3" active-text-color="#fff">
      <template v-for="menu in allmenu">
        <!-- 一级路由菜单 -->
        <el-menu-item v-if="menu.ismenuBtn" :index="'/'+menu.url" :key="menu.menuid">
          <i class="iconfont" :class="menu.icon"></i>
          <span style="margin-left: 10px;">{{menu.menuname}}</span>
        </el-menu-item>
        <!-- 二级菜单 -->
        <el-submenu v-else :key="menu.menuid" :index="menu.menuname">
            <template slot="title">
              <i class="iconfont" :class="menu.icon"></i>
              <span style="margin-left: 5px;">{{menu.menuname}}</span>
            </template>
            <el-menu-item-group>
              <el-menu-item v-for="chmenu in menu.menus" :index="'/'+chmenu.url" :key="chmenu.menuid">
                <!-- <i class="iconfont" :class="chmenu.icon"></i> -->
                <span style="margin-left: 10px;">{{chmenu.menuname}}</span>
              </el-menu-item>
            </el-menu-item-group>
        </el-submenu>
      </template>
    </el-menu>
  </div>
</template>
<script>
import { menu } from '../api/userMG'
import {menuData} from './menuData'
export default {
  name: 'leftnav',
  data() {
    return {
      collapsed: false,
      allmenu: []
    }
  },
  created() {
    // 获取图形验证码
    let res = {
      success: true,
      data: menuData,
      msg: 'success'
    }
    this.allmenu = res.data

    // menu(localStorage.getItem('logintoken'))
    //   .then(res => {
    //     console.log(JSON.stringify(res))
    //     if (res.success) {
    //       this.allmenu = res.data
    //     } else {
    //       this.$message.error(res.msg)
    //       return false
    //     }
    //   })
    //   .catch(err => {
    //     this.$message.error('菜单加载失败，请稍后再试！')
    //   })
    // 监听
    this.$root.Bus.$on('toggle', value => {
      this.collapsed = !value
    })
  }
}
</script>
<style scoped lang="less">
.left-menu-box{
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    margin-top: 65px;
    width: 100%;
    min-height: 400px;
  }
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    border: none;
    text-align: left;
  }
  /deep/.el-menu-item-group__title {
    padding: 0px;
  }
  .el-menu-bg {
    background-color: #1f2d3d !important;
  }
  .el-menu {
    border: none;
  }
  .el-menu-item.is-active,.el-menu-item.is-active:hover{
    background-color: #1890FF !important;
  }
  .el-submenu.is-active{
    .el-submenu__title{
      *{
        color:#fff !important;
      }
    }
  }
  /deep/.el-submenu__title:hover,.el-menu-item:hover{
    background-color: rgba(64,158,255,0.3) !important;
  }
  .el-submenu .el-menu-item{
    height: 40px;
    line-height: 40px;
  }
  /deep/.el-submenu__title{
    height: 52px;
    line-height: 52px;
  }

}

</style>
